@sanity/ui

What is @sanity/ui?

@sanity/ui is a React component library designed to help developers build user interfaces for Sanity.io applications. It provides a set of customizable and accessible UI components that are consistent with the Sanity design system.

What are @sanity/ui's main functionalities?

Button

The Button component allows you to create customizable buttons with different tones and styles.

import { Button } from '@sanity/ui';

function App() {
  return (
    <Button text="Click me" tone="primary" />
  );
}

Card

The Card component is used to create a container with padding and shadow, useful for grouping content.

import { Card } from '@sanity/ui';

function App() {
  return (
    <Card padding={4} shadow={1}>
      <p>This is a card</p>
    </Card>
  );
}

TextInput

The TextInput component provides a styled input field for user text input.

import { TextInput } from '@sanity/ui';

function App() {
  return (
    <TextInput placeholder="Enter text" />
  );
}

Stack

The Stack component helps in arranging children components in a vertical stack with specified spacing.

import { Stack } from '@sanity/ui';

function App() {
  return (
    <Stack space={3}>
      <div>Item 1</div>
      <div>Item 2</div>
      <div>Item 3</div>
    </Stack>
  );
}

Grid

The Grid component allows you to create a grid layout with specified columns and gaps between items.

import { Grid } from '@sanity/ui';

function App() {
  return (
    <Grid columns={3} gap={4}>
      <div>Item 1</div>
      <div>Item 2</div>
      <div>Item 3</div>
    </Grid>
  );
}

Other packages similar to @sanity/ui

material-ui

Material-UI is a popular React component library that implements Google's Material Design. It offers a wide range of components and customization options, making it a versatile choice for building modern web applications. Compared to @sanity/ui, Material-UI has a larger community and more extensive documentation.

chakra-ui

Chakra UI is a simple, modular, and accessible component library that gives you the building blocks to build React applications with speed. It focuses on providing a set of composable and customizable components. Compared to @sanity/ui, Chakra UI emphasizes ease of use and flexibility.

ant-design

Ant Design is a comprehensive UI framework for enterprise applications. It provides a wide range of high-quality components and design guidelines. Compared to @sanity/ui, Ant Design is more feature-rich and is often used in large-scale applications.

semantic-ui-react

Semantic UI React is the official React integration for Semantic UI. It provides a set of components that follow the Semantic UI design principles. Compared to @sanity/ui, Semantic UI React focuses on providing a human-friendly HTML syntax and a wide range of themes.

README

@sanity/ui

The Sanity UI components.

npm install @sanity/ui

# Install peer dependencies
npm install react react-dom styled-components

Usage

import {Button, ThemeProvider} from '@sanity/ui'
import {buildTheme} from '@sanity/ui/theme'
import {createRoot} from 'react-dom/client'

const root = createRoot(document.getElementById('root'))
const theme = buildTheme()

root.render(
  <ThemeProvider theme={theme}>
    <Button text="Hello, world" />
  </ThemeProvider>,
)

License

MIT-licensed. See LICENSE.

Changelog

2.11.1 (2025-01-07)

Bug Fixes

• deps: update dependency framer-motion to ^11.16.0 (#1553) (a388818)
• refactor ReactElement to JSX.Element types (#1555) (a2317c5)